<template>
  <div>
    <van-cell
      icon="search"
      v-for="(item, i) in searchSugList"
      :key="i"
      @click="$emit('search', item)"
    >
      <span slot="title" v-html="highLight(item)"></span>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSug } from '@/api/search'
import { debounce } from 'lodash'
export default {
  props: ['searchText'],
  data () {
    return {
      searchSugList: []
    }
  },

  created () {},

  methods: {
    highLight (text) {
      const reg = new RegExp(this.searchText, 'gi')
      return text.replace(
        reg,
        `<span style='color:red;'>${this.searchText}</span>`
      )
    }
  },
  computed: {},
  watch: {
    searchText: debounce(async function (newValue) {
      if (this.searchText.length === 0) {
        return false
      } else {
        const res = await getSearchSug(newValue)
        this.searchSugList = res.data.data.options
      }
    }, 500)
  }
}
</script>

<style scoped lang="less"></style>
